<template>
  <Sidebar ref="sidebar" :title="$t('history.title')">
    <div class="layoutList" :class="{ isDark }">
      <div
        class="layoutItem"
        v-for="item in layoutList"
        :key="item.value"
        @click="useMindData(item)"
        :class="{ active: item.value === layout }"
      >
        <div class="imgBox">
          <el-dropdown @click.stop>
            <el-icon><More /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-icon><Delete @click.stop="onDel(item)" /></el-icon>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <img :src="item.path" alt="" />
        </div>
        <div class="name">{{ item.name }}</div>
      </div>
      <el-empty v-if="!layoutList.length" description="暂无历史记录" />
    </div>
  </Sidebar>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus"
import Sidebar from "./Sidebar.vue"
import { mapState } from "pinia"

import { useMind } from "@mind/store"
import mixin from "./mixin"
import { APIXmindDel, APIXmindGet, APIXmindList } from "@/views/super-idea/api"
import { getSceneImageList } from "../../type"
import MindMapUtil from "@/views/super-idea/utils/mind-map"
import debounce from "@/utils/debounce"

const cache = { list: [] }
/**
 * @Desc: 结构
 */
export default {
  mixins: [mixin],
  components: {
    Sidebar
  },
  data() {
    return {
      sidebarType: "historyRecord",
      layoutList: [],
      layout: ""
    }
  },
  async mounted() {
    cache.list = await getSceneImageList()
    console.log("cache.list", cache.list)
    const res = await APIXmindList()
    if (res.code === 200) {
      this.layoutList = res.data.list.map((item) => {
        if (item.scene) {
          return {
            ...cache.list.find((i) => i.name === item.scene),
            ...item
          }
        }
      })
    }
  },
  computed: {
    ...mapState(useMind, ["isDark"])
  },
  methods: {
    // filterKey
    filterKey(id) {
      this.layoutList = this.layoutList.filter((item) => item.id !== id)
    },
    onDel(item) {
      ElMessageBox.confirm("是否删除？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        const { code } = await APIXmindDel(item.id)
        if (code === 200) {
          this.filterKey(item.id)
          ElMessage({
            type: "success",
            message: "删除成功"
          })
        }
      })
    },
    /**
     * @Desc: 使用主题
     */
    useMindData: debounce(async (item) => {
      const res = await APIXmindGet(item.id)
      if (res.code === 200) {
        try {
          MindMapUtil.instance.currentId = item.id
          MindMapUtil.instance.updateData(JSON.parse(res.data.content))
        } catch (error) {
          ElMessage({
            type: "error",
            message: "获取失败"
          })
        }
      }
    })
  }
}
</script>

<style lang="less" scoped>
.layoutList {
  padding: 20px;

  &.isDark {
    .name {
      color: #fff;
    }
  }

  .layoutItem {
    width: 100%;
    cursor: pointer;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 20px;
    padding-bottom: 20px;
    transition: all 0.2s;
    border: 1px solid transparent;

    &:last-of-type {
      border: none;
    }

    &.active {
      border: 1px solid #67c23a;
    }

    .imgBox {
      width: 100%;

      img {
        width: 100%;
      }
    }
    .name {
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>
